<template>
  <div>
      <el-row style="height: 90vh">
        <el-col :span="6" >
          <el-row style="margin-bottom: 10px">
            <el-button @click="getUsers(1)" :type="requestType==1?`primary`:''">女(1~25)</el-button>
            <el-button @click="getUsers(2)" :type="requestType==2?`primary`:''">女(26~50)</el-button>
            <el-button @click="getUsers(3)" :type="requestType==3?`primary`:''">女(51~75)</el-button>
            <el-button @click="getUsers(4)" :type="requestType==4?`primary`:''">女(76~100)</el-button>
          </el-row>
          <el-row style="margin-bottom: 10px">
            <el-button @click="getUsers(5)" :type="requestType==5?`primary`:''">女非(1~25)</el-button>
            <el-button @click="getUsers(6)" :type="requestType==6?`primary`:''">女非(26~50)</el-button>
            <el-button @click="getUsers(7)" :type="requestType==7?`primary`:''">女非(51~75)</el-button>
            <el-button @click="getUsers(8)" :type="requestType==8?`primary`:''">女非(76~100)</el-button>
          </el-row>
          <el-row style="margin-bottom: 10px">
            <el-button @click="getUsers(9)" :type="requestType==9?`primary`:''">男(1~50)</el-button>
            <el-button @click="getUsers(10)" :type="requestType==10?`primary`:''">男非(1~50)</el-button>
            <el-text style="color: #fb5059;font-weight: bold;margin-left: 10px">当前用户：{{currentNick}}</el-text>
          </el-row>

          <div>
            <div style="border-bottom: 0.5px solid #EEEEEE"></div>
            <div style="display: flex; flex-direction: row; align-items: center">
              <div class="cell" style="width: 50px">序号</div>
              <div class="cell" style="width: 200px">昵称</div>
              <div class="cell" style="width: 100px">腾讯ID</div>
              <div class="cell" style="width: 50px">未读</div>
              <div class="cell" style="width: 80px">操作</div>
            </div>
            <div style="display: flex; flex-direction: row; align-items: center" v-for="(item, index) in tableData" :key="index" @click="toChat(index, item)">
              <div class="cell" style="width: 50px">{{ index + 1 }}</div>
              <div class="cell" style="width: 200px">{{ item.nick }}</div>
              <div class="cell" style="width: 100px">{{ item.tengxuncode }}</div>
              <div class="cell" style="width: 50px">
                <div class="unread" v-if="item.unReadCount > 0">{{ item.unReadCount > 0? item.unReadCount: ''}}</div>
              </div>
              <div class="cell" style="width: 80px">
                <el-button size="small" @click="toChat(index, item)">聊天</el-button>
              </div>
            </div>
          </div>

<!--          <el-table :data="tableData" border style="height: 90vh" :row-class-name="tableRowClassName">-->
<!--            <el-table-column type="index" width="50" />-->
<!--            <el-table-column prop="nick" label="昵称" width="100" />-->
<!--            <el-table-column prop="tengxuncode" label="腾讯ID" width="100" />-->
<!--            <el-table-column label="未读消息" width="100" >-->
<!--              <template #default="scope">-->
<!--                <el-text style="width: 40px; height: 20px; border-radius: 10px;background-color: #fb5059;color: #FFFFFF;font-size: 12px;padding: 2px 5px;text-align: center" v-if="scope.row.unReadCount>0">{{scope.row.unReadCount}}</el-text>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="address" label="操作" width="100">-->
<!--              <template #default="scope">-->
<!--                <el-button size="small" @click="toChat(scope.$index, scope.row)">打开聊天</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
        </el-col>

        <el-col :span="18" style="height: 90vh">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import router from "@/router/index";
import { genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";
import TencentCloudChat from '@tencentcloud/chat';
import { getUserPage } from "@/request/api/common"

const SDKAppID = 1400800054; // Your SDKAppID
const secretKey = "da952eadd25735813888e18bf44ba090993cc482a24cd6787445002ea6bd060a";
let options = {
  SDKAppID: SDKAppID
};
let chat = TencentCloudChat.create(options);

export default{
   data(){
     return {
       tableData: [],
       currentNick: '',
       timer: 0,
       requestType: 0,
       rowStyle:{
         color: '#ff0000',
         padding: 0
       }
     }
   },
   mounted() {
     this.timer = setInterval(()=>{
       console.log("首页定时器")
       if(this.requestType != 0){
         this.getUsers(this.requestType)
       }
     }, 1000 * 60 * 2)
   },
   unmounted() {
     clearInterval(this.timer)
   },
  methods:{
     toChat(index, row){
       const user = this.tableData[index];
       const userID = user.tengxuncode+''
       this.currentNick = user.nick;
       chat.logout().then(res=>{
         console.log("IM登出成功:"+res.data);
         this.loginIM(IMuserID)
       }).catch(error=>{
         console.log("登出失败:"+error);
         this.loginIM(userID)
       });
     },

     loginIM(userID){
       router.push({name:'chat'})
       TUILogin.login({
         SDKAppID,
         userID,
         userSig: genTestUserSig({
           SDKAppID,
           secretKey,
           userID,
         }).userSig,
         useUploadPlugin: true,
         useProfanityFilterPlugin: false,
         framework: "vue3",
       }).then(res =>{
         console.log("IM登录成功:");
       }).catch(error=>{
         console.log("IM登录失败:"+error);
       });
     },

     getUsers(type){
       this.requestType = type
       getUserPage(type).then(res => {
         if(res.code == 0){
           this.tableData = res.data
         }
       })
     },

    tableRowClassName({row, rowIndex}){
       return 'rowClass'
    }
  }
 }

</script>
<style scoped lang="scss">
.cell{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 0.5px solid #eeeff3;
  border-right: 0.5px solid #eeeff3;
  height: 28px;
  font-size: 15px;
  color: #222222;
}
.unread{
  //width: 15px;
  //height: 15px;
  //line-height: 15px;
  border-radius: 15px;
  background-color: #fb5059;
  color: #FFFFFF;
  font-size: 10px;
  padding: 2px 8px;
  text-align: center;
}

</style>
